<script setup>
import { leftBottom } from "@/api";
// import SeamlessScroll from "@/components/seamless-scroll";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { useSettingStore } from "@/stores/setting.js";
import { ElMessage } from "element-plus";
import Chart from "@/components/Chart/index.vue";
const carouselRef = ref();
const legendData = ref([]);
legendData.value = ["燃气日接入量", "供热日接入量", "12345转发量"];
const xData = ref([]);
// 时间是从当前时，往后数一共12个小时
// 设置小时数为当前时间的小时数加12
function printNext12Hours() {
    for (let i = 0; i < 12; i++) {
        const now = new Date();
        now.setHours(now.getHours() + i);
        xData.value.push(now.toLocaleString("zh-CN", { hour: "2-digit" }));
    }
}
printNext12Hours();
let data = [[], [], []];
for (let i = 0; i < xData.value.length; i++) {
    data[0].push(100 * Math.ceil(Math.random() * 10)); //100*0-10随机数
    data[1].push(100 * Math.ceil(Math.random() * 10));
    data[2].push(10 * Math.ceil(Math.random() * 10));
}
const color = ["#ffce00", "#FF00FF", "#47ffff", "#8630f5"];
const seriesData = legendData.value.map((v, i) => {
    return {
        name: v,
        data: data[i],
        type: "scatter",
        symbolSize: function (data) {
            return Math.sqrt(data) * 1.5;
        },
        label: {
            // show: true,//显示具体值
            // formatter: function (params) {
            //   console.log(params)
            //   return params.value;
            // },
            position: "top",
            fontSize: 18,
        },
        emphasis: {
            focus: "series",
            //   label: {//聚焦时再显示具体值
            //     show: true,
            //     formatter: function (param) {
            //       return param.data[3];
            //     },
            //     position: 'top'
            //   }
        },
        itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(120, 36, 50, 0.5)",
            shadowOffsetY: 5,
            color: color[i],
        },
    };
});
const options = ref({});
options.value = {
    color,
    backgroundColor: "transparent",
    // title: {
    //   text: 'rgdhf',
    //   left: '5%',
    //   top: '3%'
    // },
    legend: {
        top: "3%",
        data: legendData.value,
        textStyle: {
            fontSize: 16,
            color: "#E5E5E5",
        },
    },
    grid: {
        left: "8%",
        top: "20%",
    },
    xAxis: {
        data: xData.value,
        splitLine: { show: false },
        axisTick: {
            show: true, //是否显示刻度
            lineStyle: { color: "#E5E5E5" }, // x轴刻度的颜色
        },
        axisLabel: {
            color: "#E5E5E5", // x轴字体颜色
            interval: 0, //轴显示所有的数据
            fontSize: 16,
        },
    },
    yAxis: {
        splitLine: {
            lineStyle: {
                type: "dashed",
                color: "#232981",
            },
        },
        scale: true,
        axisTick: {
            show: true, //是否显示刻度
            textStyle: {
                fontSize: 18,
            },
            lineStyle: { color: "#E5E5E5" }, // x轴刻度的颜色
        },
        axisLabel: {
            color: "#E5E5E5", // x轴字体颜色
            interval: 0, //轴显示所有的数据
            fontSize: 16,
        },
    },
    series: seriesData,
};
let myChart = null;
onMounted(() => {
    getData();
});
const settingStore = useSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
const state = reactive({
    list: [],
    defaultOption: {
        ...defaultOption.value,
        singleHeight: 256,
        limitScrollNum: 3,
    },
    scroll: true,
});
let num = 0;
const carouselChange = (val, oldVal) => {
    if (val == 0) {
        num++;
        if (num == 1) {
            myChart && myChart.resize();
        }
    }
};
const getData = () => {
    leftBottom({ limitNum: 20 })
        .then((res) => {
            if (res.success) {
                state.list = res.data.list;
            } else {
                ElMessage({
                    message: res.msg,
                    type: "warning",
                });
            }
        })
        .catch((err) => {
            ElMessage.error(err);
        });
};
const addressHandle = (item) => {
    let name = item.provinceName;
    if (item.cityName) {
        name += "/" + item.cityName;
        if (item.countyName) {
            name += "/" + item.countyName;
        }
    }
    return name;
};
</script>

<template>
    <div class="right-middle">
        <el-carousel
            ref="carouselRef"
            arrow="always"
            indicator-position="none"
            :initial-index="2"
            :interval="5000"
            height="300px"
            @change="carouselChange"
        >
            <el-carousel-item name="carousel-1" :key="0">
                <Chart
                    :width="'100%'"
                    :height="'300px'"
                    :option="options"
                    id="scatter-echarts"
                    style="margin-left: 5% !important"
                />
            </el-carousel-item>
            <el-carousel-item name="carousel-2" :key="1">
                <Vue3SeamlessScroll
                    :list="state.list"
                    :hover="true"
                    :step="1"
                    class="table"
                >
                    <ul class="left_boottom">
                        <li
                            class="left_boottom_item"
                            v-for="(item, i) in state.list"
                            :key="i"
                        >
                            <span class="orderNum doudong">{{ i + 1 }}</span>
                            <div class="inner_right">
                                <div class="dibu"></div>
                                <div class="flex">
                                    <div class="info">
                                        <span class="labels">处理人：</span>
                                        <span
                                            class="text-content zhuyao doudong wangguan"
                                        >
                                            {{ item.gatewayno }}</span
                                        >
                                    </div>
                                    <div class="info">
                                        <span class="labels">处理时间：</span>
                                        <span class="text-content">
                                            {{ item.createTime }}</span
                                        >
                                    </div>
                                </div>
                                <div class="info addresswrap">
                                    <span class="labels">用户姓名：</span>
                                    <span class="text-content ciyao">
                                        {{ item.userName }}</span
                                    >
                                </div>
                                <div class="info addresswrap">
                                    <span class="labels">住址：</span>
                                    <span class="text-content ciyao">
                                        {{ addressHandle(item) }}</span
                                    >
                                </div>
                                <div class="info addresswrap">
                                    <span class="labels">诉求描述：</span>
                                    <span class="text-content ciyao">
                                        {{ item.desc }}</span
                                    >
                                </div>
                            </div>
                        </li>
                    </ul>
                </Vue3SeamlessScroll>
            </el-carousel-item>
            <el-carousel-item name="carousel-3" :key="2">
                <Vue3SeamlessScroll
                    :list="state.list"
                    :hover="true"
                    :step="1"
                    class="table"
                >
                    <ul class="left_boottom">
                        <li
                            class="left_boottom_item"
                            v-for="(item, i) in state.list"
                            :key="i"
                        >
                            <span class="orderNum doudong">{{ i + 1 }}</span>
                            <div class="inner_right">
                                <div class="dibu"></div>
                                <div class="flex">
                                    <div class="info">
                                        <span class="labels">处理人：</span>
                                        <span
                                            class="text-content zhuyao doudong wangguan"
                                        >
                                            {{ item.gatewayno }}</span
                                        >
                                    </div>
                                    <div class="info">
                                        <span class="labels">处理时间：</span>
                                        <span class="text-content">
                                            {{ item.createTime }}</span
                                        >
                                    </div>
                                </div>
                                <div class="info addresswrap">
                                    <span class="labels">用户姓名：</span>
                                    <span class="text-content ciyao">
                                        {{ item.userName }}</span
                                    >
                                </div>
                                <div class="info addresswrap">
                                    <span class="labels">住址：</span>
                                    <span class="text-content ciyao">
                                        {{ addressHandle(item) }}</span
                                    >
                                </div>
                                <div class="info addresswrap">
                                    <span class="labels">诉求描述：</span>
                                    <span class="text-content ciyao">
                                        {{ item.desc }}</span
                                    >
                                </div>
                            </div>
                        </li>
                    </ul>
                </Vue3SeamlessScroll>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<style scoped lang="scss">
.text-content {
    font-size: 20px !important;
}
.table {
    height: 300px;
    overflow-y: hidden;
}
.left_boottom {
    overflow: hidden;
    padding-left: 0;
    height: 100%;
}

.doudong {
    overflow: hidden;
    backface-visibility: hidden;
    color: #47ffff;
}

.overflow-y-auto {
    overflow-y: auto;
}

.left_boottom {
    width: 100%;
    height: 100%;

    .left_boottom_item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        font-size: 20px;
        margin: 10px 0;
        .orderNum {
            margin: 0 16px 0 -20px;
        }

        .info {
            margin-right: 10px;
            display: flex;
            align-items: center;
            color: #fff;
            .labels {
                flex-shrink: 0;
                font-size: 20px;
                color: rgba(255, 255, 255, 0.6);
            }

            .zhuyao {
                // color: $primary-color;
                color: blurgba(0, 157, 255, 0.058);
            }

            .ciyao {
                color: rgba(255, 255, 255, 0.8);
            }

            .warning {
                color: #e6a23c;
                font-size: 18px;
            }
        }

        .inner_right {
            position: relative;
            height: 100%;
            width: 550px;
            flex-shrink: 0;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            .dibu {
                position: absolute;
                height: 2px;
                width: 104%;
                background-image: url("@/assets/img/zuo_xuxian.png");
                bottom: -10px;
                left: -2%;
                background-size: cover;
            }
            .addresswrap {
                width: 100%;
                display: flex;
                margin-top: 8px;
            }
        }

        .wangguan {
            color: #1890ff;
            font-weight: 900;
            font-size: 20px;
            width: 80px;
            flex-shrink: 0;
        }

        .time {
            font-size: 20px;
            // color: rgba(211, 210, 210,.8);
            color: #fff;
        }

        .address {
            font-size: 20px;
            cursor: pointer;
            // @include text-overflow(1);
        }

        .types {
            width: 30px;
            flex-shrink: 0;
        }

        .typeRed {
            color: #fc1a1a;
        }

        .typeGreen {
            color: #29fc29;
        }
    }
}
</style>
